<!--
 * @Author: XieQiu 雪球
 * @Date: 2021-05-09 11:07:23
 * @LastEditTime: 2024-05-08 16:27:25
 * @LastEditors: Please set LastEditors
 * @Description: 物联数据导出
-->
<template>
  <BaseMainSlot>
    <template v-slot:btn-box>
      <ActionBar
        :page-no="294"
        :has-add="false"
        :has-del="false"
        :has-edit="false"
        :has-cancel="false"
        :has-edit-column="true"
        :has-export="true"
        @showColumn="showColumn"
        @download="download"
      />
    </template>
    <template v-slot:search-box>
      <SearchForm :formConfig="formConfig" :formData="searchlist" @search="search" @getdataitemside="getdataitemside"></SearchForm>
    </template>
    <template v-slot:table-box>
      预览部分数据
      <div class="table-row">
        <div class="left-table">
          <Table @sortChange="changeTableSort" :propList="tableColumn" v-loading="loading" :listData="tableData" :showSelectColumn="false">
            <template v-slot:facilityNoList="{ row }">
              <template v-if="!row.index">
                <el-button
                  class="text-btn-cursor"
                  type="text"
                  size="small"
                  @click="checkFacility(row)"
                >
                  <i class="el-icon-view"></i> 查看
                </el-button>
              </template>
            </template>
          </Table>
        </div>
        <div class="pic-table">
          <Table :propList="picTableColumn" v-loading="picLoading" :listData="picTableData" :showSelectColumn="false">
            <template v-slot:img="{ row }">
              <template v-if="!row.index">
                <el-image
                  style="height: 50px"
                  :src="row.pictureData"
                  :preview-src-list="[row.pictureData]">
                  <div slot="error" class="image-slot">
                    加载中
                  </div>
                </el-image>
              </template>
            </template>
          </Table>
          <Pagination
            :page-size="pageSize"
            :current-page="currentPage"
            :total-size="totalSize"
            @changePageSize="changePageSize"
            @changeCurrentPage="changeCurrentPage"
          />
        </div>
      </div>
    </template>
    <template v-slot:dialog>
      <el-dialog title="设施列表" :visible="facilityDialogVisible" :before-close="()=>{facilityDialogVisible = false}">
        <div class="facility-list">
          <div v-for="(item,index) in batchFacilityMapperList" :key="index" class="facility-item">
            <div class="info-line"><div class="name">设施编号：</div><div class="value">{{ item.facilityNo }}</div></div>
            <div class="info-line"><div class="name">设施名称：</div><div class="value">{{ item.facilityName }}</div></div>
          </div>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button class="zh-button-one" @click="facilityDialogVisible = false">
            关 闭
          </el-button>
        </div>
      </el-dialog>
      <el-dialog
        id="tableColumnDialog"
        title="配置列"
        :visible.sync="dialogTableColumnVisible"
      >
        <tableColumn
          v-if="dialogTableColumnVisible"
          ref="tableColumn"
          :tableColumn="allTableColumn"
          @cancelColumn="cancelColumn"
        />
        <div slot="footer" class="dialog-footer">
          <el-button class="zh-button-one" @click="dialogTableColumnVisible = false">
            取 消
          </el-button>
          <el-button
            class="zh-button-two"
            type="primary"
            @click="saveColumn"
          >
            保 存
          </el-button>
        </div>
      </el-dialog>
      <!-- // TODO: -->
      <!-- 导出 -->
      <el-dialog
        class="dialog"
        title="导出"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose">
        <el-form
          ref="ruleForm"
          label-position="left"
          :model="exportData"
          :rules="rules"
        >
          <el-form-item label="导出内容：" class="w100p">
            <el-checkbox-group v-model="exportData.checkList">
              <el-checkbox label="数据项"></el-checkbox>
              <el-checkbox label="图片"></el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="1.打包进度：" class="w100p" v-if="progressVisible">
            <el-progress :percentage="percentage" style="width: 100%; padding-top: 11px;"></el-progress>
          </el-form-item>
          <el-form-item label="2.下载进度：" class="w100p" v-if="progressVisible">
            <el-progress :percentage="percentage2" style="width: 100%; padding-top: 11px;"></el-progress>
          </el-form-item>
          <!-- <el-form-item label="选择设施" class="w50p">
            <el-cascader
              v-model="exportData.facilityNo"
              :options="treedata"
              :props="{
                expandTrigger: 'hover',
                value: 'facilityNo',
                children: 'facilityList',
                label: 'facilityName',
                emitPath: false,
            }"
              @change="handleFacilityNoChange">
            </el-cascader>
          </el-form-item>
          <el-form-item label="数据项类型" class="w50p">
            <el-select v-model="exportData.dataTypeConfigId" placeholder="请选择数据项类型" @change="dataTypeChange">
              <el-option :label="item.dataTypeName" :value="item.dataTypeConfigId" v-for="(item,index) in datatypeList" :key="index"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="数据项" prop="dataItemIdList" class="w50p">
            <el-select v-model="exportData.dataItemIdList" multiple :multiple-limit="6" placeholder="请选择">
              <el-option
                v-for="item in edataItemIdList"
                :key="item.dataItemId"
                :label="item.originalName"
                :value="item.dataItemId">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="时间范围" prop="timeDate" class="w50p">
            <el-date-picker
              v-model="exportData.timeDate"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="timestamp"
              format="yyyy-MM-dd HH:mm:ss"
              @change="exportDataTimeChange"
              @input="$forceUpdate()"
              clearable="false"
              :default-time="['12:00:00', '08:00:00']"
              >
            </el-date-picker>
          </el-form-item> -->
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button :disabled="progressVisible" @click="handleClose">取 消</el-button>
          <el-button type="primary" :disabled="progressVisible" @click="exportDataList">导出</el-button>
        </span>
    </el-dialog>
    <!-- // TODO: -->
    </template>
  </BaseMainSlot>
</template>

<script>
import SearchForm from './component/SearchForm';
import Table from '@/components/table/table.vue';
import Pagination from "@/components/Pagination";
import ActionBar from "@/components/ActionBar";
import nowpagereq from "@/api/basic-info-manage/camera-management/index";
import environmental from "@/api/digital-production/material-link-monitoring/environmental-data-monitoring/index";
import datatype from "@/api/basic-info-manage/data-type-manage/index";
import growthApi from "@/api/digital-production/growth-record-management/seedling-growth-analysis";
// import StartTimeEndTimeSelectionBox from "./component/StartTimeEndTimeSelectionBox";
import axios from 'axios'
import SearchBox from "./component/SearchBox";
import BaseMainSlot from "@/components/BaseMainSlot/newBaseMainSlot";
import { mymixin } from "@/utils/mixins";
import { mapGetters } from "vuex";
import throttle from 'lodash/throttle'
// import baseURL from "@/api/baseURL"
export default {
  name: "ExportOfIotData",
  components: {
    SearchForm,
    Table,
    ActionBar,
    Pagination,
    BaseMainSlot,
    SearchBox,
    // StartTimeEndTimeSelectionBox
  },
  mixins: [mymixin],
  data() {
    return {
      // TODO:
      dialogVisible: false,
      edataItemIdList: [],
      exportData: {
        facilityNo: '',
        dataTypeConfigId: '',
        dataItemIdList: [],
        organizationNo: sessionStorage.getItem('organizationNo'),
        dataTypeId: '',
        endTime: '',
        startTime: '',
        timeDate: [],
        checkList: []
      },
      rules: {
        // dataItemIdList: [
        //     { required: true, message: '数据项不能为空', trigger: ['change','blur'] }
        //   ],
        // timeDate: [
        //   { required: true, message: '时间范围不能为空', trigger: ['change','blur'] }
        // ],
        checkList: [
          { required: true, message: '导出内容不能为空', trigger: ['change','blur'] }
        ],
      },
      // TODO:
      tableColumn: [
        { prop: 'dataItemName', label: '数据项名称', minWidth: '150' },
        { prop: 'dataTypeName', label: '数据类型名称' },
        { prop: 'facilityNoList', label: '发现设施', slotName: 'facilityNoList' },
        { prop: 'collectDatetime', label: '采集时间' },
        { prop: 'value', label: '数值' },
        { prop: 'symbol', label: '单位符号' },
        { prop: 'unitName', label: '单位名称' },
      ],
      formConfig: [
        {
          label: '选择设施',
          prop: 'facilityNo',
          type: 'cascader',
          options: [], // treedata
          optionKey: {
            expandTrigger: 'hover',
            value: 'facilityNo',
            children: 'facilityList',
            label: 'facilityName',
            emitPath: false,
          }
        }, {
          label: '数据项类型',
          prop: 'dataTypeIdList',
          type: 'selects',
          change: 'getdataitemside',
          search: true,
          options: [], // datatypeList
          optionKey: { label: 'dataTypeName', value: 'dataTypeId' },
        }, {
          label: '数据项',
          prop: 'dataItemIdList',
          type: 'selects',
          options: [], // echartsidelist
          optionKey: { label: 'originalName', value: 'dataItemId' }
        }, {
          label: '选择时间',
          prop: 'date',
          type: 'daterange',
          format: 'yyyy-MM-dd HH:mm:ss'
        },
      ],
      // 图片导出进度
      progressVisible: false,
      percentage: 0,
      progressVisible2: false,
      percentage2: 0,
      // 右侧表格
      pageSize: 10,
      currentPage: 1,
      totalSize: 0,
      picTableColumn: [
        { prop: 'pictureNo', label: '图片', slotName: 'img' },
        { prop: 'collectTime', label: '时间', width: 180 },
      ],
      picLoading: false,
      picTableData: [],
      searchlist: {
        facilityNo: ''
      },
      facilityDialogVisible: false,
      batchFacilityMapperList: [],
      obj: {
        name: ""
      },
      files: {},
      upLoading: false,
      downLoading: false,
      formData: {
        person: {}
      },
      loading: false,
      treedata: [],
      datatypeList: [],
      dataTypeId: "",
      dataItemId: "",
      facilityNo: "",
      startTime: "",
      endTime: "",
      Time: '',
      endDatePicker: this.processDate(),
      timeRange: '',
      pickerOptions: {
        onPick: ({ maxDate, minDate }) => {
          this.timeRange = minDate.getTime();
          if (maxDate) this.timeRange = "";
        },
        disabledDate: time => {
          if (this.timeRange) {
            const one = 2 * 24 * 3600 * 1000;
            const minTime = this.timeRange - one;
            const maxTime = this.timeRange + one;
            return (
              time.getTime() < minTime ||
              time.getTime() > maxTime ||
              time.getTime() + 1 * 24 * 3600 * 1000 > Date.now()
            );
          } else {
            return (
              time.getTime() > Date.now()
            );
          }
        },
        shortcuts: null,
        // shortcuts: [
        //   {
        //     text: "最近3天",
        //     onClick(picker) {
        //       const end = new Date();
        //       end.setTime(end.getTime() - 3600 * 1000 * 24 * 1);
        //       const start = new Date();
        //       start.setTime(
        //         start.getTime() - 3600 * 1000 * 24 * 3
        //       );
        //       picker.$emit("pick", [start, end]);
        //     }
        //   }
        // ]
      }
    };
  },
  computed: {
    ...mapGetters({
      judgePermission: "permission/judgePermission"
    })
  },
  // watch: {
  //   'timeRange'(val) {
  //     this.timeRange[0] = val[0];
  //     this.timeRange[1] = val[1];
  //   }
  // },
  created() {
    const date = new Date()
    let year = date.getFullYear()
    let month = date.getMonth() + 1
    month = month > 9 ? month : '0' + month
    let day = date.getDate()
    day = day > 9 ? day : '0' + day
    // this.searchlist.date = [new Date(year+`-${month}-${day} 00:00`).getTime(), new Date(year+`-${month}-${day} 23:59`).getTime()]
    this.$set(this.searchlist,'date',[new Date(year+`-${month}-${day} 00:00`).getTime(), new Date(year+`-${month}-${day} 23:59`).getTime()])
    this.getDepartmentList();
    // this.departmentPost();
  },
  mounted() {
    // 获取表格数据
    this.getTableDataList();
    this.getPicTableDataList()
  },
  beforeDestroy () {
    this.timer && clearInterval(this.timer)
  },
  methods: {
    changeTableSort(column) { 
      this.sortList = column.order ? [
        { property: column.prop, direction: column.order == "ascending" ? 'asc' : 'desc' }
      ] : []
      this.getTableDataList()
    },
    async getTableDataList() {
      this.loading = true;
      
      let params = {
        dataTypeIdList: this.searchlist.dataTypeIdList || [],
        dataItemIdList: this.searchlist.dataItemIdList || [],
        facilityNo: this.searchlist.facilityNo || undefined,
        startTime: this.searchlist.date && this.dateToFormat(this.searchlist.date[0]),
        endTime: this.searchlist.date && this.dateToFormat(this.searchlist.date[1]),
        organizationNo: sessionStorage.organizationNo,
        sortList: this.sortList || [],
      };
      this.exportParam = params
      // console.log(params.entity)
      const { data: data } = await axios({
        method: "post",
        url: this.$baseurl.webServiceUrl + 'v3/iot/dataItem/queryExportNew',
        headers: {
          'accessToken': sessionStorage.token,
          'databaseName': sessionStorage.databaseName,
          'organizationList': sessionStorage.organizationList,
          'organizationNo': sessionStorage.organizationNo,
          'virtualSystemNo': sessionStorage.virtualSystemNo
        },
        data: params
      })
      // basicInfoManage.getStaffList(params).then((res) => {
      this.loading = false;
      let datas = data.data || [];
      //   // 赋值总条数
      if (data.code === 1) {
        // 赋值数组
        this.tableData = datas;
        this.addblankmet();
        // this.resetActionBar();
      }
    },
    async getPicTableDataList() {
      this.picLoading = true;
      let params = {
        page: this.currentPage,
        size: this.pageSize,
        sortStr: "collectTime",
        entity: {
          dataTypeIdList: this.searchlist.dataTypeIdList || [],
          dataItemIdList: this.searchlist.dataItemIdList || [],
          facilityNo: this.searchlist.facilityNo || undefined,
          startTime: this.searchlist.date && this.dateToFormat(this.searchlist.date[0]),
          endTime: this.searchlist.date && this.dateToFormat(this.searchlist.date[1]),
          organizationNo: sessionStorage.organizationNo,
        }
      };
      const { data: data } = await axios({
        method: "post",
        url: this.$baseurl.webServiceUrl + 'v3/growth/collectRecord/queryPageByCondition',
        headers: {
          'accessToken': sessionStorage.token,
          'databaseName': sessionStorage.databaseName,
          'organizationList': sessionStorage.organizationList,
          'organizationNo': sessionStorage.organizationNo,
          'virtualSystemNo': sessionStorage.virtualSystemNo
        },
        data: params
      })
      this.picLoading = false;
      let datas = data.data || [];
      if (data.code === 1) {
        this.totalSize = datas.totalElements;
        let list = datas.content
        list.forEach(async (item, index) => {
          let res = await growthApi.getpicmesbypicid(item.pictureNo);
          let newurl = "data:image/png;base64," + res.data.pictureData;
          this.$set(list[index], "pictureData", newurl);
        })
        this.picTableData = list;
      }
    },
    checkFacility(row) {
      let list = []
      row.facilityList.map(el => {
        list.push({ facilityNo: el.facilityNo, facilityName: el.facilityName })
      })
      this.batchFacilityMapperList = list
      this.facilityDialogVisible = true;
    },
    processDate() {
      // const self = this;
      return {
        disabledDate(time) {
          return time.getTime() >= Date.now() // 开始时间不选时，结束时间最大值小于等于当天
        }
      };
    },
    startVal(e) {
      this.startTime = e;
      if (e && this.endTime) {
        this.getTableDataList();
      }
    },
    endVal(e) {
      this.endTime = e;
      if (e && this.startTime) {
        this.getTableDataList();
      }
      // this.getTableDataList();
    },
    endValTExt(e) {
      this.dateActive = '';
      if (e) {
        this.startTime = this.dateToFormat(e[0]);
        this.endTime = this.dateToFormat(e[1]);
        this.getTableDataList();
      } else {
        this.startTime = '';
        this.endTime = '';
      }
      // console.log(this.startTime, this.endTime)
    },
    dateFn(i) {
      this.dateActive = i;
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 3);
      this.timeRange = [start, end];
    },
    // 获取下拉数据
    getDepartmentList() {
      this.gettreelist();
      this.getlist();
    },
    async getlist() {
      const res = await datatype.gethasconfig();
      this.datatypeList = res.data;
      this.formConfig[1].options = res.data;
    },
    async gettreelist() {
      const res = await nowpagereq.getshexiangdikaui();
      let data = res.data;
      this.facilityGroupList = data.facilityGroupList;
      this.facilityList = data.facilityList;
      if (this.facilityGroupList.length > 0) {
        this.treeList = [this.facilityGroupList[0].facilityGroupId];
      } else {
        this.treeList = [this.facilityList[0].facilityId];
      }
      this.changetreedata();
    },
    // 处理树状数据
    changetreedata() {
      let nothasgroup = [];
      if (this.facilityList.length > 0) {
        nothasgroup = [
          {
            facilityName: "未分组地块",
            facilityId: this.facilityList[0].facilityId,
            facilityList: this.facilityList
          }
        ];
      } else {
        nothasgroup = [
          {
            facilityName: "未分组地块",
            facilityList: this.facilityList
          }
        ];
      }
      let hasgrouplist = this.facilityGroupList.filter((item) => {
        // item.facilityName = item.facilityGroupName
        // item.facilityId = item.facilityGroupId
        this.$set(item, "facilityName", item.facilityGroupName);
        this.$set(item, "facilityId", item.facilityGroupId);
        // console.log(item)
        let groupitem = {
          ...item
        };
        return groupitem;
      });
      this.treedata = [...hasgrouplist, ...nothasgroup];
      this.formConfig[0].options = [...hasgrouplist, ...nothasgroup];
    },
    // 获取当前地块或地块组下的dataitem,不带环境数据
    getdataitemside(param) {
      this.searchlist = param
      this.formConfig[2].options = [];
      this.dataItemId = undefined
      let params = {
        facilityNo: this.searchlist.facilityNo || undefined,
        dataTypeIdList: this.searchlist.dataTypeIdList || [],
        // control: false
      };
      environmental.getdataidechart(params).then((res) => {
        if (res.code === 1) {
          let listone = res.data;
          listone.forEach((selitem, selindex) => {
            if (selitem.dataItemId === this.dataItemId) {
              listone[selindex].ischecked = true;
            } else {
              listone[selindex].ischecked = false;
            }
          });
          this.formConfig[2].options = listone;
          // console.log(listone)
        } else {
          this.formConfig[2].options = [];
        }
      });
    },
    getSelect() {
      if (this.startTime || this.endTime) {
        this.getTableDataList();
      }
    },
    // 点击导出搜索的数据
    download:throttle(async function(){
      // TODO:
      this.$set(this.exportData,'facilityNo','')
      this.$set(this.exportData,'dataTypeId','')
      this.$set(this.exportData,'dataItemIdList',[])
      this.$set(this.exportData,'dataTypeConfigId','')
      this.$set(this.exportData,'startTime',this.dateToFormat(new Date().getTime() - 3 * 24 * 3600 * 1000))
      this.$set(this.exportData,'endTime',this.dateToFormat(new Date().getTime()))
      this.$set(this.exportData,'timeDate',[new Date().getTime() - 3 * 24 * 3600 * 1000, new Date().getTime()])
      this.$set(this.exportData,'checkList',[])
      this.dialogVisible = true
      this.$refs['ruleForm'] && this.$refs['ruleForm'].clearValidate()
      // TODO:
      // let url = 'v3/iot/dataItem/export'
      // let excel = `物联数据表-${this.startTime + '_' + this.endTime}`
      // this.downloadExcel(url, this.exportParam, excel)
    },1000),
    // async download() {
    //   let url = 'v3/iot/dataItem/export'
    //   let excel = `物联数据表-${this.startTime + '_' + this.endTime}`
    //   this.downloadExcel(url, this.exportParam, excel)
    // },
    search() {
      this.currentPage = 1;
      this.getTableDataList();
      this.getPicTableDataList()
    },
    changePageSize(pageSize) {
      this.pageSize = pageSize;
      this.getPicTableDataList()
    },
    changeCurrentPage(currentPage) {
      this.currentPage = currentPage;
      this.getPicTableDataList()
    },
    // TODO:
    handleFacilityNoChange(value) {
      this.exportData.dataItemIdList = []
      let params = {
        facilityNo: value || ''
      }
      if(this.exportData.dataTypeConfigId) {
        params['dataTypeConfigId'] = this.exportData.dataTypeConfigId
      }
      environmental.getdataidechart(params).then((res) => {
        if (res.code === 1) {
          let listone = res.data;
          listone.forEach((selitem, selindex) => {
            if (selitem.dataItemId === this.dataItemId) {
              listone[selindex].ischecked = true;
            } else {
              listone[selindex].ischecked = false;
            }
          });
          this.edataItemIdList = listone
        } else {
          this.edataItemIdList = []
        }
      });
    },
    dataTypeChange(value) {
      let arr = this.datatypeList.filter(el=>el.dataTypeConfigId === value)
      this.exportData.dataTypeId = arr[0].dataTypeId
      this.exportData.dataItemIdList = []
      let params = {
        dataTypeConfigId: value || ''
      }
      if(this.exportData.facilityNo) {
        params['facilityNo'] = this.exportData.facilityNo
      }
      environmental.getdataidechart(params).then((res) => {
        if (res.code === 1) {
          let listone = res.data;
          listone.forEach((selitem, selindex) => {
            if (selitem.dataItemId === this.dataItemId) {
              listone[selindex].ischecked = true;
            } else {
              listone[selindex].ischecked = false;
            }
          });
          this.edataItemIdList = listone
        } else {
          this.edataItemIdList = []
        }
      });
    },
    handleClose() {
      this.$set(this.exportData,'facilityNo','')
      this.$set(this.exportData,'dataTypeId','')
      this.$set(this.exportData,'dataItemIdList',[])
      this.$set(this.exportData,'dataTypeConfigId','')
      this.$set(this.exportData,'startTime','')
      this.$set(this.exportData,'endTime','')
      this.$set(this.exportData,'timeDate',[])
      this.$set(this.exportData,'checkList',[])
      this.$refs['ruleForm'] && this.$refs['ruleForm'].clearValidate()
      this.dialogVisible = false
    },
    exportDataList () {
      if (this.progressVisible) return
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          if (this.exportData.checkList.includes('数据项') && this.exportData.checkList.length == 1) {
            let params = {...this.exportParam}
            delete params.timeDate
            let url = 'v3/iot/dataItem/exportNew'
            let excel = `物联数据表-${params.startTime + '_' + params.endTime}`
            this.downloadExcel(url, params, excel)
            this.dialogVisible = false
          }
          if (this.exportData.checkList.includes('图片')) {
            let param = {
              ...this.exportParam
            }
            if (this.exportData.checkList.includes('数据项')) {
              param.dataItemQueryBO = {
                ...this.exportParam
              }
            }
            environmental.task(param).then(res => {
              if (res.code == 1) {
                this.progressVisible = true
                this.percentage = 0
                this.timer = setInterval(() => {
                  this.queryPercentage()
                }, 1000)
              } else {
                this.$message.error(res.msg)
              }
            })
          }
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    // 查询图片导出进度
    queryPercentage () {
      environmental.taskStatus().then(res => {
        if (res.data.flag) {
          this.percentage = 100
          this.timer && clearInterval(this.timer)
          this.taskDownload(res.data)
        } else {
          let percentage = (res.data.down/res.data.count*100).toFixed(0)
          this.percentage = Number(percentage)
        }
      })
    },
    // 图片下载
    async taskDownload (taskData) {
      this.progressVisible2 = true
      this.percentage2 = 0
      let that = this
      const { data: data } = await axios({
        method: "get",
        url: `${this.$baseurl.webServiceUrl}v3/growth/collectRecord/download?taskId=${taskData.taskId}`,
        'responseType': "blob",
        headers: {
          'accessToken': sessionStorage.token,
          'databaseName': sessionStorage.databaseName,
          'organizationList': sessionStorage.organizationList,
          'organizationNo': sessionStorage.organizationNo,
          'virtualSystemNo': sessionStorage.virtualSystemNo
        },
        onDownloadProgress (progress) {
          let percentage = Math.round(progress.loaded / taskData.size * 100).toFixed(0);
          that.percentage2 = Number(percentage)
        },
      })
      this.loading = false;
      const link = document.createElement("a");
      link.download = `物联数据-${this.exportData.startTime + '_' + this.exportData.endTime}`;
      link.style.display = "none";
      link.href = URL.createObjectURL(data);
      document.body.appendChild(link);
      link.click();
      URL.revokeObjectURL(link.href);
      document.body.removeChild(link);
      // 下载完成关闭弹窗
      this.dialogVisible = false
      this.progressVisible = false
      this.percentage = 0
      this.progressVisible2 = false
      this.percentage2 = 0
    },
    exportDataTimeChange(e) {
      if(e === null) {
        this.$set(this.exportData,'timeDate',[])
          this.exportData.startTime = ''
          this.exportData.endTime = ''
      }
      if(e[1] - e[0] > 3 * 24 * 3600 * 1000) {
        this.$set(this.exportData,'timeDate',[])
        this.$message.warning('时间范围不能超过三天')
      } else {
        this.$set(this.exportData,'timeDate',[])
        if(e[0]) {
          this.$set(this.exportData,'timeDate',e)
          this.exportData.startTime = this.dateToFormat(e[0])
          this.exportData.endTime = this.dateToFormat(e[1])
        }
      }
      // TODO:
    }
  }
};
</script>

<style scoped lang="scss">
@import "~@/styles/variables.scss";
.label {
  min-width: 300px !important;
}
::v-deep .el-form-item__label {
  min-width: 100px !important;
  text-align: end;
}
::v-deep .pull-right {
  .upload-demo {
    height: 100%;
    .el-upload {
      height: 100%;
      .el-button {
        height: 100%;
      }
    }
  }
}
.facility-list{
  display: flex;
  justify-content: flex-start;
    flex-direction: row;
    flex-wrap: wrap;
  .facility-item{
    width: 400px;
    max-width: 30%;
    min-width: 30%;
    margin-right: 3%;
    margin-bottom: 10px;
    // height: 80px;
    border-radius: 5px;
    // border: 1px solid #ccc;
    box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.15);
    padding: 10px 20px;

    .info-line{
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
      font-size: 14px;
      &:not(:last-child){
        margin-bottom: 10px;
      }
      .name{
        text-align: left;
        width: 80px;
        flex-shrink: 0;
      }
      .value{
        width: 100%;
        text-align: left;
        font-weight: normal;
      }
    }
  }
}
.dialog {
  ::v-deep .el-range-input {
    color: #000 !important;
  }
}
.table-row {
  display: flex;
  width: 100%;
  height: calc(100% - 30px);
  .left-table {
    width: calc(100% - 420px);
    margin-right: 15px;
  }
  .pic-table {
    width: 400px;
  }
  ::v-deep {
    th {
      height: 55px;
    }
  }
}
::v-deep .image-slot {
  line-height: 55px;
}
</style>
